<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Member Reservations</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="icon" href="{{ url_for('static', filename='logo.png') }}" type="image/png">
    <style>
        body {
            padding: 0;
            margin: 0;
            background-image: url('/static/images/Background_image.jpeg');
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
            min-height: 100vh;
        }
        .container-wrapper {
            background-color: rgba(255, 255, 255, 0.95);
            width: 95vw;
            min-height: 95vh;
            margin: 2.5vh auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            overflow: auto;
        }
        .reservations-table {
            margin-top: 20px;
        }
        .nav-item.active a {
            color: red;
            font-weight: bold;
            transform: scale(1.1);
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .navbar-nav .nav-link {
            transition: transform 0.3s ease;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="container-wrapper">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            {% if session.role == 'admin' %}
            <a class="navbar-brand" href="{{ url_for('view_courses') }}">课程信息管理</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item {% if current_page =='members' %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('manage_members') }}">用户信息管理</a>
                    </li>
                </ul>
            </div>
            {% elif session.role == 'user' %}
            <a class="navbar-brand" href="{{ url_for('view_reservations_by_member', member_id=session.get('member_id')) }}">我的课程</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item {% if current_page == 'view_profile' %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('view_profile') }}">个人信息</a>
                    </li>
                    <li class="nav-item {% if current_page == 'view_courses' %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('view_courses') }}">全部课程</a>
                    </li>
                </ul>
            </div>
            {% endif %}
            <!-- 退出按钮 -->
            {% if session.role %}
            <form action="{{ url_for('logout') }}" method="post" style="margin-left: auto;">
                <button type="submit" class="btn btn-danger">退出</button>
            </form>
            {% endif %}
        </nav>
        
        <h1 class="mb-4">用户名： {{ member.name }}</h1>
        <table class="table table-striped reservations-table">
            <thead>
                <tr>
                    <th>课程名</th>
                    <th>课程时间</th>
                    <th>教练</th>
                    <th>预约时间</th>
                </tr>
            </thead>
            <tbody>
                {% for reservation in reservations %}
                <tr>
                    <td>{{ reservation.course_name }}</td>
                    <td>{{ reservation.course_duration }}</td>
                    <td>{{ reservation.coach }}</td>
                    <td>{{ reservation.reservation_time }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>